---
title: Pencarian Situs
description: Pelajari tentang fitur pencarian situs bawaan Starlight dan cara mengkustomisasinya.
---

import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';

Secara default, situs Starlight termasuk pencarian teks lengkap yang didukung oleh [Pagefind](https://pagefind.app/), yang merupakan alat pencarian cepat dan bandwidth rendah untuk situs statis.

Tidak diperlukan konfigurasi untuk mengaktifkan pencarian. Bangun dan terapkan situs Anda, kemudian gunakan bilah pencarian di header situs untuk menemukan konten.

## Sembunyikan konten dalam hasil pencarian

### Kecualikan sebuah halaman

Untuk mengecualikan sebuah halaman dari indeks pencarian Anda, tambahkan [`pagefind: false`](/id/reference/frontmatter/#pagefind) ke frontmatter halaman:

```md title="src/content/docs/tidak-diindeks.md" ins={3}
---
title: Konten yang Disembunyikan dari Pencarian
pagefind: false
---
```

### Kecualikan bagian dari sebuah halaman

Pagefind akan mengabaikan konten di dalam elemen dengan atribut [`data-pagefind-ignore`](https://pagefind.app/docs/indexing/#removing-individual-elements-from-the-index).

Dalam contoh berikut, paragraf pertama akan ditampilkan dalam hasil pencarian, tetapi isi dari `<div>` tidak akan:

```md title="src/content/docs/sebagian-diindeks.md" ins="data-pagefind-ignore"
---
title: Halaman yang Diindeks Sebagian
---

Teks ini akan ditemukan melalui pencarian.

<div data-pagefind-ignore>

Teks ini akan disembunyikan dari pencarian.

</div>
```

## Penyedia pencarian alternatif

### Algolia DocSearch

Jika Anda memiliki akses ke [Algolia’s DocSearch program](https://docsearch.algolia.com/) dan ingin menggunakannya sebagai gantinya Pagefind, Anda dapat menggunakan plugin DocSearch Starlight resmi.

<Steps>

1. Install `@astrojs/starlight-docsearch`:

   <Tabs syncKey="pkg">

   <TabItem label="npm">

   ```sh
   npm install @astrojs/starlight-docsearch
   ```

   </TabItem>

   <TabItem label="pnpm">

   ```sh
   pnpm add @astrojs/starlight-docsearch
   ```

   </TabItem>

   <TabItem label="Yarn">

   ```sh
   yarn add @astrojs/starlight-docsearch
   ```

   </TabItem>

   </Tabs>

2. Tambahkan DocSearch ke konfigurasi [`plugins`](/id/reference/configuration/) Starlight Anda di `astro.config.mjs` dan taruh `appId`, `apiKey`, and `indexName` Algolia Anda:

   ```js ins={4,10-16}
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
   import starlight from '@astrojs/starlight';
   import starlightDocSearch from '@astrojs/starlight-docsearch';

   export default defineConfig({
   	integrations: [
   		starlight({
   			title: 'Situs dengan DocSearch',
   			plugins: [
   				starlightDocSearch({
   					appId: 'ID_APLIKASI_ANDA',
   					apiKey: 'KUNCI_API_ANDA',
   					indexName: 'NAMA_INDEX_ANDA',
   				}),
   			],
   		}),
   	],
   });
   ```

</Steps>

Dengan konfigurasi yang diperbarui ini, bilah pencarian di situs Anda sekarang akan membuka modal Algolia sebagai gantinya modal pencarian bawaan.

#### Menerjemahkan UI DocSearch

Secara default, DocSearch hanya menyediakan string UI dalam Bahasa Inggris.
Tambahkan terjemahan UI modal untuk bahasa Anda menggunakan [internationalization system](/id/guides/i18n/#terjemahkan-ui-starlight) bawaan Starlight.

<Steps>

1. Perluas definisi koleksi konten `i18n` Starlight dengan skema DocSearch di `src/content/config.ts`:

   ```js ins={4} ins=/{ extend: .+ }/
   // src/content/config.ts
   import { defineCollection } from 'astro:content';
   import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
   import { docSearchI18nSchema } from '@astrojs/starlight-docsearch/schema';

   export const collections = {
   	docs: defineCollection({ schema: docsSchema() }),
   	i18n: defineCollection({
   		type: 'data',
   		schema: i18nSchema({ extend: docSearchI18nSchema() }),
   	}),
   };
   ```

2. Tambahkan terjemahan ke file JSON Anda di `src/content/i18n/`.

   Ini adalah default Bahasa Inggris yang digunakan oleh DocSearch:

   ```json title="src/content/i18n/en.json"
   {
   	"docsearch.searchBox.resetButtonTitle": "Clear the query",
   	"docsearch.searchBox.resetButtonAriaLabel": "Clear the query",
   	"docsearch.searchBox.cancelButtonText": "Cancel",
   	"docsearch.searchBox.cancelButtonAriaLabel": "Cancel",
   	"docsearch.searchBox.searchInputLabel": "Search",

   	"docsearch.startScreen.recentSearchesTitle": "Recent",
   	"docsearch.startScreen.noRecentSearchesText": "No recent searches",
   	"docsearch.startScreen.saveRecentSearchButtonTitle": "Save this search",
   	"docsearch.startScreen.removeRecentSearchButtonTitle": "Remove this search from history",
   	"docsearch.startScreen.favoriteSearchesTitle": "Favorite",
   	"docsearch.startScreen.removeFavoriteSearchButtonTitle": "Remove this search from favorites",

   	"docsearch.errorScreen.titleText": "Unable to fetch results",
   	"docsearch.errorScreen.helpText": "You might want to check your network connection.",

   	"docsearch.footer.selectText": "to select",
   	"docsearch.footer.selectKeyAriaLabel": "Enter key",
   	"docsearch.footer.navigateText": "to navigate",
   	"docsearch.footer.navigateUpKeyAriaLabel": "Arrow up",
   	"docsearch.footer.navigateDownKeyAriaLabel": "Arrow down",
   	"docsearch.footer.closeText": "to close",
   	"docsearch.footer.closeKeyAriaLabel": "Escape key",
   	"docsearch.footer.searchByText": "Search by",

   	"docsearch.noResultsScreen.noResultsText": "No results for",
   	"docsearch.noResultsScreen.suggestedQueryText": "Try searching for",
   	"docsearch.noResultsScreen.reportMissingResultsText": "Believe this query should return results?",
   	"docsearch.noResultsScreen.reportMissingResultsLinkText": "Let us know."
   }
   ```

</Steps>
